<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" >
		<title>看护老人-预约</title>
		<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/sytle.css">
		<link rel="stylesheet" href="${pageContext.request.contextPath}/css/jquery.range.css">
		<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-2.1.4.min.js"></script>
		<script src="${pageContext.request.contextPath}/js/jquery.range.js"></script>
	</head>
	<body style="background: #f1f1f1;">
		<div class="page">
			<header>
			    <div class="navbar">
			        <ul>
				        <li class="l-back"><a href="/"><img src="${pageContext.request.contextPath}/images/left.png" alt="返回"/></a></li>
				        <li class="n-word">看护老人</li>
				        <li class="n-intro"><a href="${pageContext.request.contextPath}/goods/needInfo/1.html">服务内容</a></li>
			        </ul>
			    </div>
		   	</header>
		   	<form action="${pageContext.request.contextPath}/need/create.html" method="post" id="childForm">
		   	<div class="appointment_main">
			   	<div class="fwnr">
			   		<p class="question">老人的性别是？</p>
			   		<ul class="old_sex clearfix">
			   			<li class="be-selected" onclick="old_sex('男性')">男性</li>
			   			<li onclick="old_sex('女性')">女性</li>
			   		</ul>
			   	</div>
			   	<div class="fwnr">
			   		<p class="question">老人的自理程度？</p>
			   		<ul class="old_self clearfix">
			   			<li class="be-selected" onclick="old_self('自理')">自理</li>
			   			<li onclick="old_self('半自理')">半自理</li>
			   			<li onclick="old_self('不能自理')">不能自理</li>
			   		</ul>
			   	</div>
			   	<div class="fwnr">
			   		<p class="question">您的心理价位是？<span><i id="feeview">￥3000-4000</i>（一个月）</span></p>
			   		<div class="demo">
						<input type="hidden" class="single-slider" id="fee" value="3000-4000" />
					</div>
			   	</div>
			   	<div class="fwnr">
			   		<p class="question">其他需求</p>
			   		<ul class="old_home clearfix">
			   			<li onclick="old_home('住家')">住家</li>
			   			<li class="be-selected" onclick="old_home('不住家')">不住家</li>
			   		</ul>
			   		<ul class="old_place clearfix">
			   			<li onclick="old_place('本地人')">本地人</li>
			   			<li class="be-selected" onclick="old_place('籍贯不限')">籍贯不限</li>
			   		</ul>

			   	</div>
			   	<div class="special_needs">
			   		<img src="${pageContext.request.contextPath}/images/message-select.png">
			   		<input type="text" placeholder="如果您有特殊需求，请留言" name="wDesc">
			   	</div>
			</div>
				<input type="hidden" name="wTitle"  value="看护老人"/>
			<input type="hidden" name="wNeedType" id="wNeedType" value="10"/>
			<input type="hidden" name="wOldGender" id="old_sex" value="男性"/>
			<input type="hidden" name="wOldType" id="old_self" value="自理"/>
			<input type="hidden" name="wIsLive" id="old_home" value="不住家"/>
			<input type="hidden" name="wNation" id="old_place" value="籍贯不限"/>
			<input type="hidden" name="wFeeType" id="feev" value="4000"/>
			</form>
			<button class="footer_fix" id="btn_sub">立即预约</button>
		</div>
		<script>
			$(".old_sex li").click(function(){
				$(".old_sex li").removeClass("be-selected");
				$(this).addClass("be-selected").siblings().removeClass("be-selected");
			});
			$(".old_self li").click(function(){
				$(".old_self li").removeClass("be-selected");
				$(this).addClass("be-selected").siblings().removeClass("be-selected");
			});
			$(".old_home li").click(function(){
				$(".old_home li").removeClass("be-selected");
				$(this).addClass("be-selected").siblings().removeClass("be-selected");
			});
			$(".old_place li").click(function(){
				$(".old_place li").removeClass("be-selected");
				$(this).addClass("be-selected").siblings().removeClass("be-selected");
			});
			
			function old_sex(value) {
				$("#old_sex").val(value);
			}
			
			function old_self(value) {
				$("#old_self").val(value);
			}
			
			function old_home(value) {
				$("#old_home").val(value);
			}
			
			function old_place(value) {
				$("#old_place").val(value);
			}
			
			$("#btn_sub").click(function(){
				
			   	$("#childForm").submit();
			   
			});
			
			$(function(){
				$('.single-slider').jRange({
					from: 3000,
					to: 5000,
					step: 1,
					scale: [3000,4000,5000],
					format: '%s',
					width: 280,
					showLabels: true,
					showScale: true,
					onstatechange: function(myvalue){ 
	                  	if(myvalue > 3000) {
						 	$("#feev").val('3000-4000');
						 	$("#feeview").text('￥3000-4000');
						}
						if(myvalue > 4000) {
							 $("#feev").val('4000-5000');
							 $("#feeview").text('￥4000-5000');
						}
						
					}
				});

			});
		</script>
	</body>
</html>
